The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs. Note that any other scrolls, such as those performed by the user, are not affected by this property. When this property is specified on the "root element", it applies to the viewport instead. This property specified on the "body element" will not propagate to the viewport.

The easiest way to add a smooth scroll animation is to set the scroll behavior property in CSS –e.g. body { scroll-behavior: smooth }

auto: the scrolling box scrolls instantly;
smooth: the scrolling box scrolls in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. User agents should follow platform conventions, if any.

setting scroll behavior with CSS

smooth scroll behavior

scroll-behavior property

scrolling text

The power of anchors

Introduction
Conclusion

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis justo ex, nec commodo metus pellentesque quis. Suspendisse lobortis eros elit, nec consequat sem posuere et. Aenean varius facilisis elit, a mattis ante bibendum a. Ut eu eleifend velit. Donec accumsan placerat massa quis egestas. Praesent vitae maximus nisl. Nulla ut dui quis purus tincidunt porta nec id eros. Vivamus in metus quis eros gravida finibus in sit amet elit. Maecenas eu sagittis augue. Nulla ut dolor et turpis vestibulum bibendum id at augue. Etiam eu faucibus sem.

Mauris nec magna nisi. Maecenas nec leo ullamcorper tellus eleifend lobortis. Nulla risus orci, porta non diam vitae, posuere efficitur risus. Sed lorem dolor, imperdiet quis condimentum in, posuere quis arcu. Aliquam ex ligula, blandit non elementum non, molestie at metus. Duis vestibulum facilisis leo bibendum vestibulum. Integer ac justo augue. Integer mi turpis, porttitor sit amet orci nec, convallis egestas tortor. Duis convallis sapien ut lorem convallis, nec tristique eros sodales. Quisque placerat elit vel quam condimentum, quis fermentum risus elementum. Donec eget tincidunt nisl, nec laoreet massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus at faucibus ligula. Ut eu rhoncus tellus.

Introduction

Aliquam pretium lacus a ex tincidunt, et aliquet magna feugiat. Suspendisse sagittis condimentum pretium. Aenean a scelerisque arcu, consequat aliquet felis. Cras dictum nulla nec odio tincidunt faucibus. Nullam nec fermentum elit. Duis in velit vitae felis euismod dignissim ullamcorper non nisl. Nullam malesuada faucibus malesuada. Duis sem velit, viverra et diam tempus, convallis sodales orci. Mauris gravida eros at lorem varius dignissim. Vivamus nec nibh lorem.

Curabitur aliquet leo mi, non molestie orci mollis ut. Curabitur pretium, turpis rutrum tempus mattis, ex tellus lobortis sapien, vel vehicula urna purus ut ex. Sed at nisl sit amet nibh auctor hendrerit quis non est. Praesent hendrerit dui consectetur nisi lacinia, tincidunt scelerisque nunc condimentum. Etiam imperdiet nibh sed orci efficitur auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec scelerisque neque quis lacus facilisis elementum. Sed nisl justo, vulputate non diam id, ornare luctus ligula. Praesent metus felis, feugiat non sapien eget, commodo aliquet risus. Integer congue lacinia nulla, ut vulputate augue. Suspendisse risus ex, eleifend at velit eget, ultricies hendrerit sem. Integer sit amet tincidunt erat, sed convallis sem.

Conclusion

Nam tristique mi eu lectus rutrum, vel porta magna pharetra. Vestibulum dictum leo dolor, non sagittis arcu elementum nec. Cras commodo erat sit amet dolor efficitur, a eleifend libero ultrices. Vivamus facilisis bibendum posuere. Etiam ornare massa sit amet blandit pharetra. Ut vel egestas mi. Duis tempor massa elit. Nulla nec neque magna. Vestibulum posuere facilisis justo, egestas vulputate neque pellentesque sit amet.

Javascript smooth roll

scroll to a certain position

legacy JavaScript smooth scroll

scrollbars - introduction

The scrollbar set of CSS properties is a proprietary style hook letting designers create custom themes for the browser's native scrollbars.

Chrome, Edge, Safari and Opera support the non-standard ::-webkit-scrollbar pseudo element, which allows us to modify the look of the browser's scrollbar.

For webkit browsers, you can use the following pseudo elements to customize the browser's scrollbar:

::-webkit-scrollbar: the scrollbar.
::-webkit-scrollbar-button: the buttons on the scrollbar (arrows pointing upwards and downwards).
::-webkit-scrollbar-thumb: the draggable scrolling handle.
::-webkit-scrollbar-track: the track (progress bar) of the scrollbar.
::-webkit-scrollbar-track-piece: the track (progress bar) NOT covered by the handle.
::-webkit-scrollbar-corner: the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
::-webkit-resizer: the draggable resizing handle that appears at the bottom corner of some elements.

scrolling and scrollbars

Content

definition and usage

setting scroll behavior with CSS

smooth scroll behavior

scroll-behavior property

Section 1

Section 2

scrolling text

The power of anchors

Introduction

Conclusion

Javascript smooth roll

scroll to a certain position

legacy JavaScript smooth scroll

scrollbars - introduction

scrollbar applications

apply the pseudo element

hid scrollbars

customize srollbars

always show scrollbars